<template>
  <el-card class="box-card">
    <template #header>
      <div class="flex align-center justify-between">
        <div>
          <div>组件列表</div>
          <small style="font-size: 10px; color: #bbbbbb"
            >点击组件，添加至页面
          </small>
        </div>
        <el-button type="primary" @click="clearHandler">清空</el-button>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col
        @click="handleComponent(item)"
        :span="12"
        v-for="item in componentsList"
        :key="item.type"
      >
        <el-card
          shadow="hover"
          :body-style="{ padding: '15px 8px', cursor: 'pointer' }"
        >
          <div class="flex align-center">
            <IconFont
              class="mr-1"
              style="color: #1890ff; font-size: 20px"
              :iconName="item.icon"
            ></IconFont>
            <span>{{ item.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { ref } from 'vue';
import { FactoryStore } from '@/hooks';
import { SHOP_DECORATION_ACTION, CLEAR_SHOP_DECORATION } from '@/utils/Const';
import { uuid } from '@/utils/tools';
export default {
	setup () {
		let { action, mutation } = FactoryStore({
			namespaced : 'shopDecoration',
			actionsMethod : [SHOP_DECORATION_ACTION],
			mutationsMethod : [CLEAR_SHOP_DECORATION]
		});
		let componentsList = ref([
			{
				componentName : 'HyNavBar',
				icon : '3zhuangtailan',
				title : '导航栏',
				defaultProps : {
					title : '页面标题',
					isBack : true
				}
			},
			{
				componentName : 'HySearch',
				icon : 'sousuo',
				title : '搜索框',
				defaultProps : {
					placeholder : '请输入搜索关键词'
				}
			}
		]);

		let handleComponent = (params) => {
			let row = {
				id : uuid(),
				ismobile : true, // 移动端
				componentName : params.componentName, // 组件名称
				defaultProps : params.defaultProps // 组件默认属性
			};
			action[SHOP_DECORATION_ACTION](row);
		};

		let clearHandler = () => {
			mutation[CLEAR_SHOP_DECORATION]({
				ismobile : true
			});
		};
		return {
			clearHandler,
			handleComponent,
			componentsList
		};
	}
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 400px;
}
</style>
